<template>
  <div class="blog-list-container" ref="container" v-loading="loading">
    <!--    列表-->
    <ul class="list">
      <li class="rows" v-for="item in data.rows">
        <RouterLink style="display: flex" :to="{
          name: 'BlogDetail',
          params: {
            id: item.id
          }
        }">
          <img v-if="item.thumb" :src="item.thumb" :alt="item.title" :title="item.title"/>
        </RouterLink>
        <div class="row-content">
          <RouterLink class="title" :to="{
            name: 'BlogDetail',
            params: {
              id: item.id
            }
          }">
            {{ item.title }}
          </RouterLink>
          <div class="aside">
            <span>日期：{{moment(+item.createDate).format('YYYY-MM-DD')}}</span>
            <span>浏览：{{item.scanNumber}}</span>
            <span>评论：{{item.commentNumber}}</span>
            <span><RouterLink :to="{name: 'CategoryBlog', params: {categoryId: item.category.id}}">{{item.category.name}}</RouterLink></span>
          </div>
          <p class="main">
            {{item.description}}
          </p>
        </div>
      </li>
    </ul>
    <!--    分页-->
    <Pager :current="routerInfo.page" :limit="routerInfo.limit" :total="data.total" @pageChange="handlePageChange"/>
  </div>
</template>
<script>

import Pager from "@/components/Pager";
import getData from "@/mixins/getData";
import {getBlogs} from "@/api/blog/blog";
import moment from "moment";

export default {
  name: "BlogList",
  mixins: [getData({})],
  components: {Pager},
  computed: {
    routerInfo() {
      const categoryId = +this.$route.params.categoryId || -1
      const page = +this.$route.query.page || 1
      const limit = +this.$route.query.limit || 10
      return {
        categoryId,
        page,
        limit
      }
    }
  },
  watch: {
    async $route() {
      this.loading = true
      this.$refs.container.scrollTop = 0
      this.data = (await this.getData()).data
      this.loading = false
    }
  },
  methods: {
    moment,
    async getData() {
      return await getBlogs(this.routerInfo.page, this.routerInfo.limit, this.routerInfo.categoryId)
    },
    handlePageChange(newPage) {
      const query = {
        page: newPage,
        limit: this.routerInfo.limit
      }
      if (this.routerInfo.categoryId === -1) {
        this.$router.push({
          name: 'Blog',
          query,
        })
      }else {
        this.$router.push({
          name: 'CategoryBlog',
          query,
          params: {
            categoryId: this.routerInfo.categoryId
          },
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.blog-list-container{
  width: 100%;
  height: 100%;
  overflow: auto;
  scroll-behavior: smooth;
  .list{
    width: 100%;
    .rows{
      height: 200px;
      display: flex;
      padding: 16px 20px;
      border-bottom: 1px solid #dddddd;
      img{
        border-radius: 10px;
        margin-right: 20px;
      }
      .row-content{
        &>.title{
          display: block;
          font-size: 20px;
          font-weight: bold;
          padding: 8px 0;
        }
        &>.aside{
          font-size: 14px;
          color: @gray;
          &>span{
            margin-right: 20px;
          }
        }
        &>.main{
          width: 100%;
          overflow: hidden;
          -webkit-line-clamp: 6;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
ul{
  list-style: none;
}
</style>